<template>
	<div class="news">
		<h1>我是News组件，上面组件共有{{persons.length}}人</h1>
		<button @click="getOneNews">点我获取一条新闻</button>
		<ul>
			<li v-for="n in newsList" :key="n.id">
				{{n.title}}
			</li>
		</ul>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name:'News',
		computed:{
			...mapState(['newsList','persons'])
		},
		methods: {
			getOneNews(){
				this.$store.dispatch('getOneNewsFromServer')
			}
		},
	}
</script>

<style scoped>
	.news{
		background-color: skyblue;
		padding: 20px;
	}
</style>